<template>
  <div>
    <!-- 方向 -->
    <nav-item v-if="directionList.length" :list="directionList" :current-index="directionIndex" type="方向" @navClick="handleDirectionClick" />

    <!-- 分类 -->
    <nav-item v-if="categortList.length" :list="categortList" :current-index="categortIndex" type="分类" @navClick="handleCategoryClick" />

    <!-- 难度 -->
    <nav-item v-if="difficultList.length" :list="difficultList" :current-index="difficultIndex" type="难度" @navClick="handleDifficultClick" />
  </div> 
</template>
<script>
import NavItem from './course-nav-item.vue'
import {getAllDire, getAllType, getChild, getLevels} from "../../api/course";
export default {
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      directionIndex: '', // 方向索引
      directionList: [], // 方向数据
      categortIndex: '', // 分类索引
      categortList: [], // 分类数据
      difficultIndex: '', // 难度索引
      difficultList: [], // 难度数据
      params: {
        typeId:'',
        parentTypeId:'',
        level:'',
      },
    }
  },
  created () {
    this.getAll()
    // this.normalizeList()

  },
  methods: {


    // 获取全部方向、分类
    getAll(){
      getAllDire().then(res =>{
        let dire = res.data
        dire.splice(0,0,{
          id: '',
          typeName: "全部"
        })

        this.directionList=dire
        console.log(this.directionList)
      })

      getAllType().then(res=>{
        let type = res.data
        type.splice(0,0,{
          id:'',
          typeName:'全部'
        })
        this.categortList=type
      })

      getLevels().then(res => {
        let level = res.data
        level.splice(0,0,{
          id:'',
          typeName:'全部'
        })
        this.difficultList =level
      })
    },

    // 反向导航点击事件
    handleDirectionClick (params) {
      this.directionIndex = params.index
      this.params.parentTypeId = params.index
      this.params.typeId = ''
      this.categortIndex = ''
      this.params.direction = params.data


      if (params.index == ''){
        getAllType().then(res=>{
          let type = res.data
          type.splice(0,0,{
            id:'',
            typeName:'全部'
          })
          this.categortList=type
        })
      } else{
        getChild(params.index).then(res => {
          let type = res.data
          type.splice(0, 0, {
            id: '',
            typeName: '全部'
          })
          this.categortList = type
        })
      }



    },
    // 分类导航点击事件
    handleCategoryClick (params) {
      this.categortIndex = params.index
      this.params.typeId = params.index
      this.params.category = params.data
    },
    // 难度导航点击事件
    handleDifficultClick (params) {
      this.params.level = params.index
      this.difficultIndex = params.index
      this.params.difficult = params.data
    },
    // 格式化数据
    normalizeList () {
      let list = this.list.slice()
      list.forEach(item => {
        if (item.code === 'direction') {
          this.directionList = item.data
        } else if (item.code === 'category') {
          this.categortList = item.data
        } else if (item.code === 'difficult') {
          this.difficultList = item.data
        }
      })
    }
  },
  watch: {
    params: {
      handler () {
        this.$emit('change', this.params)
      },
      deep: true
    }
  },
  computed: {
    computeCategoryList () {
      let result = []
      let categortList = this.categortList.slice()
      if (this.directionIndex !== 0) {
        let direction = this.directionList[this.directionIndex]
        categortList = categortList.filter(item => item.direction === direction || item.direction === '全部')
      }
      categortList.forEach(item => {
        result = result.concat(item.data)
      })
      return result
    }
  },
  components: {
    NavItem
  }
}
</script>
